<template>
  <div>
    <div class="main-box">
      <div class="main-le">
        <!-- <div class="home-column">
          <el-tabs v-model="activeName" >
            <el-tab-pane v-if="this.title === '名刹宝寺'" label='寺院场所' name="first"></el-tab-pane>
            <el-tab-pane v-if="this.title !== '名刹宝寺'" :label='this.title' name="first"></el-tab-pane>
          </el-tabs>
        </div> -->
        <div class="list-col2">
          <ul>
            <li v-for="item in this.data" @click="gotodetail(item)" :key="item.index">
              <p v-if="item.sortName !== '表格下载'" v-html="item.title" @click="gotodetail(item)"></p>
              <p v-if="item.sortName === '表格下载'"><a :href="'http://img.shanghaifoxie.com' + item.pic" download="">{{item.title}}</a></p>
            </li>
          </ul>
        </div>

      </div>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="this.currentPage1"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="this.total">
    </el-pagination>
  </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 1,
      activeName: 'first',
      request: {
        pageNo: '0',
        pageSize: '10',
        searchName: this.$route.params.id
      },
      data: [],
      title: '',
      total: 1,
      paramsId: ''
    };
  },
  created() {
    this.fetchData();
    this.init();
  },
  methods: {
    fetchData() {
      this.request.searchName = this.$route.params.id;
      this.init();
    },
    init() {
      this.$http({
        method: 'get',
        url: `http://www.shanghaifoxie.com/web/api/search`,
        params: this.request
      })
        .then(response => {
          if (response.data !== null) {
            this.total = response.data.data.totalElements;
            this.data = response.data.data.content;
          }
        })
        .catch(response => {
          console.log(response);
        });
    },
    gotodetail(item) {
      this.$router.push({ path: `/details/${item.id}` });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.request.pageNo = val - 1;
      this.init();
    }
  },
  mounted() {
  },
  watch: {
    $route: 'fetchData'
  },
  components: {}
};
</script> 

<style lang="less" scope>
.fr {
  float: right;
}
.el-pagination {
  margin-top: 30px;
}
.main-box {
  height: auto;
  overflow: hidden;
  padding-bottom: 20px;
  .main-le {
    .list-col2 {
      padding-top: 8px;
      li {
        width: 100% !important;
        cursor: pointer;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        position: relative;
        padding: 0 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &::before {
          position: absolute;
          left: 0;
          top: 18px;
          content: '';
          width: 4px;
          height: 4px;
          background-color: #dd9b1e;
        }
      }
    }
  }
  .main-ri {
    width: 380px;
    .lists {
      padding-top: 8px;
      li {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        position: relative;
        padding-left: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &::before {
          position: absolute;
          left: 0;
          top: 18px;
          content: '';
          width: 4px;
          height: 4px;
          background-color: #dd9b1e;
        }
      }
    }
  }
  .el-pager {
    li {
      &:hover {
        color: #dd9b1e !important;
      }
    }
    .active {
      background: #dd9b1e !important;
      color: #fff !important;
    }
  }
}
</style>